<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    class Root extends React.Component{
        constructor(props) {
            super(props);
            this.state={
                root:""
            }
        }
        render() {
            return <fieldset>
                <legend><h2>root父组件</h2></legend>
<p>这是子组件的值:{this.state.root}</p>
                <Child1 clickroot={(a)=>{
                    console.log(a)
                    this.setState({
                        root:a
                    })
                }}/>
                <Child2 Child2={this.state.root}/>
            </fieldset>
        }
    }
    class Child1 extends React.Component{
        constructor(props) {
            super(props);
        }
        render() {
            return <fieldset>
                <legend><h2>Child1子组件</h2></legend>
                <p>这是子组件</p>
                <button onClick={this.okClick.bind(this)}>传值</button>
            </fieldset>
        }
        okClick(){
            this.props.clickroot("这是子传过来的值")
        }
    }
    class Child2 extends React.Component{
        constructor(props) {
            super(props);
        }
        render() {
            return <fieldset>
                <legend><h2>Child2子组件</h2></legend>
                <p>Child2子组件</p>
                <p>接收到的Child1传来的值:{this.props.Child2}</p>
            </fieldset>
        }
    }
    ReactDOM.render(<Root/>,app)
</script>